{% extends 'base.html' %}
{% load staticfiles %}
{%block custom_css%}
<style>
    .btn-edit,
    .bta,
    .bta:hover {
        color: #337ab7;
    }

    #input-form {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }

    #demo1 {
        display: none;
        position: fixed;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 540px;
        height: 260px;
        background-color: rgba(255, 255, 255, 1);
        z-index: 1002;
        padding: 0px 20px 0px 20px;
    }

    .ion-close-round:before {
        content: "X";
    }

    .close-btn {
        float: right;
        cursor: pointer;
        opacity: .4;
        margin-top: 20px;
    }

    .close-btn:hover {
        opacity: 1;
    }

    .form1 {
        margin-left: 60px;
    }
</style>
{%endblock%}

{% block content %}

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    {%if user.type <= 1%}
    <h2 class="page-header">添加新房间</h2>
    <div>
        <form class="form-horizontal" method="POST" action="/room_info">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">楼层</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="floor" id="inputEmail3">
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">房间号</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="num" id="inputEmail3">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">可住人数</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" name="people" id="inputPassword3">
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">房间状态</label>
                <div class="col-sm-5">
                    <select class="form-control" name='status'>
                        <option value="1">空闲</option>
                        <option value="2">预定</option>
                        <option value="3">清理中</option>
                        <option value="4">维修中</option>
                        <option value="5">入住</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">房间类型</label>
                <div class="col-sm-5">
                    <select class="form-control" name='type'>
                        <option value="1">标准间</option>
                        <option value="2">大床房</option>
                        <option value="3">商务双人间</option>
                        <option value="4">豪华大床房</option>
                    </select>
                </div>
                <div class="col-sm-4 tips"></div>
            </div>
            {% csrf_token %}
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-2">
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </div>
        </form>
    </div>
    {%endif%}
    <div>
        <h2 class="sub-header pull-left">房间信息</h2>
        <div class="btn-group pull-right" style="margin-top: 30px;">
                <button type="button" class="btn btn-primary dropdown-toggle" 
                        data-toggle="dropdown">
                    过滤 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="/room_info?room_status=1">空闲</a></li>
                    <li><a href="/room_info?room_status=2">预定</a></li>
                    <li><a href="/room_info?room_status=3">清理中</a></li>
                    <li><a href="/room_info?room_status=4">维修中</a></li>
                    <li><a href="/room_info?room_status=5">入住</a></li>
                </ul>
            </div>
    </div>
    <div class="clearfix"></div>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>房间号</th>
                    <th>楼层</th>
                    <th>房间类型</th>
                    <th>房间状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for room_info in room_infos%}
                <tr>
                    <td>{{forloop.counter}}</td>
                    <td>{{room_info.num}}</td>
                    <td>{{room_info.floor}}</td>
                    <td>
                        {% if room_info.type == 1 %}
                        标准间
                        {%elif room_info.type == 2 %}
                        大床房
                        {%elif room_info.type == 3 %}
                        商务双人间
                        {%elif room_info.type == 4 %}
                        豪华大床房
                        {%endif%}

                    </td>
                    <td id="status_{{room_info.id}}">
                        {% if room_info.status == 1 %}
                        空闲
                        {%elif room_info.status == 2 %}
                        预定
                        {%elif room_info.status == 3 %}
                        清理中
                        {%elif room_info.status == 4 %}
                        维修中
                        {%elif room_info.status == 5 %}
                        入住
                        {%endif%}
                    </td>
                    <td><button class="btn btn-default btn-edit" type="button" value="{{room_info.id}}">编辑</button></td>
                </tr>
                {%endfor %}

            </tbody>
        </table>
    </div>
</div>

<div id="input-form">
</div>
<div id="demo1">
    <div style="margin-bottom:30px;">
        <h3 style="float:left;">修改房间状态</h3>
        <div><span title="关闭" class="close-btn ion-close-round"></span></div>
        <div style="clear:both;"></div>
    </div>
    <form class="form-horizontal form1" method="POST" action="/change_roomstatus">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">房间号</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" name="room_num" id="input1" readonly>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">状态</label>
            <div class="col-sm-5">
                <select class="form-control" name='status' id='select-status'>
                    <option value="1">空闲</option>
                    <option value="2">预定</option>
                    <option value="3">清理中</option>
                    <option value="4">维修中</option>
                    <option value="5">入住</option>
                </select>
            </div>
        </div>
        <input type="hidden" name="id" id="hidden-id">
        {% csrf_token %}
        <div class="form-group">
            <div class="col-sm-offset-8 col-sm-2">
                <button type="button" class="btn btn-primary btn-add">提交</button>
            </div>
        </div>
    </form>
</div>

<script>
    $(".btn-edit").click(function () {
        var room_num = $(this).parent().parent().children('td:nth-child(2)').text()
        var id = $(this).val()
        var status = $('#status_'+id).text()
        var dict = {
            '空闲':1,
            '预订':2,
            '清理中':3,
            '维修中':4,
            '入住':5
        }
        $("#input1").val(room_num)
        $("#hidden-id").val(id)
        $("#select-status option[value="+dict[$.trim(status)]+"]").attr("selected", "selected");
        $("#input-form").show()
        $("#demo1").show()
    })
    $(".close-btn").click(function () {
        $("#input-form").hide()
        $("#demo1").hide()
    })
    $(".btn-add").click(function () {
        var id = $('#hidden-id').val()
        var status = $('#select-status').val()
        $.ajax({
            type: "POST",
            url: "/change_roomstatus",
            data: {
                id: id,
                status: status,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function (result) {
                if (result.status == 'ok') {
                    $("#status_" + id).text($('#select-status option:selected').text())
                }
            }
        })

        $("#input-form").hide()
        $("#demo1").hide()
    })
</script>

{% endblock %}